<template>
  <div class="not-found-container">
    <div class="not-found-content">
      <div class="error-icon">
        <n-icon size="120" color="#ff6b6b">
          <AlertCircleOutline />
        </n-icon>
      </div>
      
      <h1 class="error-title">404</h1>
      <p class="error-message">抱歉，您访问的页面不存在</p>
      <p class="error-description">
        页面可能已被删除、重命名或暂时不可用
      </p>
      
      <div class="action-buttons">
        <n-button type="primary" size="large" @click="goHome">
          <template #icon>
            <n-icon><HomeOutline /></n-icon>
          </template>
          返回首页
        </n-button>
        
        <n-button size="large" @click="goBack">
          <template #icon>
            <n-icon><ArrowBackOutline /></n-icon>
          </template>
          返回上页
        </n-button>
      </div>
      
      <div class="help-links">
        <p>或者您可以：</p>
        <n-space>
          <n-button text @click="router.push({ name: 'OrderManagement' })">
            订单管理
          </n-button>
          <n-button text @click="router.push({ name: 'ProductManagement' })">
            商品管理
          </n-button>
          <n-button text @click="router.push({ name: 'UserManagement' })">
            用户管理
          </n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { 
  AlertCircleOutline, 
  HomeOutline, 
  ArrowBackOutline 
} from '@vicons/ionicons5'

const router = useRouter()

const goHome = () => {
  router.push({ name: 'Dashboard' })
}

const goBack = () => {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    router.push({ name: 'Dashboard' })
  }
}
</script>

<style scoped>
.not-found-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.not-found-content {
  text-align: center;
  background: white;
  border-radius: 20px;
  padding: 60px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

.error-icon {
  margin-bottom: 30px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.error-title {
  font-size: 72px;
  font-weight: 700;
  color: #ff6b6b;
  margin: 0 0 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-message {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.error-description {
  font-size: 16px;
  color: #666;
  margin: 0 0 40px 0;
  line-height: 1.5;
}

.action-buttons {
  margin-bottom: 40px;
}

.action-buttons .n-button {
  margin: 0 10px;
}

.help-links {
  border-top: 1px solid #eee;
  padding-top: 30px;
}

.help-links p {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
}

.help-links .n-button {
  color: #667eea;
}

.help-links .n-button:hover {
  color: #764ba2;
}

/* 深色主题适配 */
:global(.dark) .not-found-content {
  background: #1a1a1a;
  color: #fff;
}

:global(.dark) .error-message {
  color: #fff;
}

:global(.dark) .error-description {
  color: #ccc;
}

:global(.dark) .help-links {
  border-top-color: #333;
}

:global(.dark) .help-links p {
  color: #ccc;
}
</style> 